<template>
    <div class="order">
        <div class="order-header">
            <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="$router.back()" fixed />
        </div>
        <div class="order-address" @click="$router.push({name:'address'})">
            <div class="address-default">默认</div>
            <div class="address-content">
                <div class="content-title">{{ someoneInfo.address }} {{ someoneInfo.address_detail }}</div>
                <div class="content-desc">{{ someoneInfo.name }} {{ someoneInfo.mobile }}</div>
            </div>
        </div>
        <div class="dialog-content">
            <img :src="infoList.primary_pic_url" alt="" class="dialog-content-img">
            <div class="dialog-content-info">
                <div class="info-title">{{ infoList.name }}</div>
                <div class="info-price">￥{{ infoList.retail_price }}</div>   
            </div>
            <div class="info-num">x{{ value }}</div>
        </div>
        <div class="order-bottom">
            <div class="bottom-allprice">
                <div class="allprice-left">商品合计</div>
                <div class="allprice-right">￥{{ value*infoList.retail_price }}</div>
            </div>
            <div class="bottom-price">
                <div class="price-left">运费</div>
                <div class="price-right">免运费</div>
            </div>
            <div class="bottom-good">
                <div class="good-left">优惠券</div>
                <div class="good-right">暂无</div>
            </div>
        </div>
        <van-submit-bar :price="(value*infoList.retail_price)*100" button-text="支付" @submit="$router.push({name:'orderphoto'})"/>
    </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue'
import { LS_Pro } from '@/util/storage';
import { useRoute } from 'vue-router';
const infoList = ref<detialNs.IinfoData>({ id: 0, name: '', goods_brief: '', retail_price: 0, goods_desc: '', primary_pic_url: '' })
const value =ref<number>(1)
const route =useRoute()
const someoneInfo = ref<SelfNs.IaddressData>({
    address: '',
    address_detail: '',
    id: 0,
    is_default: 0,
    mobile: '',
    name: '',
})
onMounted(()=>{
    infoList.value = LS_Pro.get('infoList')
    value.value =Number(route.query.number)
    someoneInfo.value=LS_Pro.get('addressdefalt')
})
</script>

<style scoped lang="scss">
.order {
    .order-header {
        height: 45px;
    }

    .order-address {
        width: 3.56rem;
        height: 1.03rem;
        margin: 18px auto 0;
        background: #fff;
        display: flex;
        align-items: center;

        .address-default {
            width: 50px;
            height: 20px;
            border: 1px solid red;
            text-align: center;
            line-height: 20px;
            margin-left: 13px;
            margin-top: -30px;
            font-size: 12px;
            color: red;

        }

        .address-content {
            margin-left: 20px;
            margin-top: -20px;

            .content-title {
                font-size: 14px;
                color: #333333;
            }

            .content-desc {
                font-size: 12px;
                color: #999999;
                margin-top: 10px;
            }
        }
    }
    .dialog-content {
            width: 3.14rem;
            height: 0.84rem;
            padding: 20px 20px;
            display: flex;
            background: white;
            margin: 20px auto 0;

            .dialog-content-img {
                width: 1rem;
                height: 100%;
                margin-right: 33px;
            }

            .dialog-content-info {
                width: 1.5rem;
                height: 100%;
                // background: red;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .info-title {
                    font-size: 15px;
                    color: #333;
                }

                .info-price {
                    font-size: 15px;
                    color: #9e4242;
                }
                .info-num{
                    font-size: 12px;
                    color: #333;
                    margin-top:50px;
                }
            }
        }
        .order-bottom{
            width:3.51rem;
            padding: 0 10px 0 14px;
            height: 1.22rem;
            background: #fff;
            margin-top:  20px;
            .bottom-allprice{
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom:1px solid #555 ;
                .allprice-left{
                    font-size: 12px;
                    color: #333;
                }
                .allprice-right{
                    font-size: 13px;
                    color: #333;
                }
            }
            .bottom-price{
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom:1px solid #555 ;
                .price-left{
                    font-size: 12px;
                    color: #333;
                }
                .price-right{
                    font-size: 13px;
                    color: #333;
                }
            }
            .bottom-good{
                width: 100%;
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .good-left{
                    font-size: 12px;
                    color: #333;
                }
                .good-right{
                    font-size: 13px;
                    color: #333;
                }
            }
        }
        }
</style>